<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能测试 - 小米商城</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .test-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .test-section h3 {
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .test-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .test-status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
        }
        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-top">
                <div class="header-left">
                    <a href="index.html" class="logo">
                        <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="小米">
                    </a>
                </div>
                <nav class="header-nav">
                    <ul>
                        <li><a href="phones.html">小米手机</a></li>
                        <li><a href="redmi.html">Redmi红米</a></li>
                        <li><a href="tv.html">电视</a></li>
                        <li><a href="laptop.html">笔记本</a></li>
                        <li><a href="tablet.html">平板</a></li>
                        <li><a href="appliance.html">家电</a></li>
                        <li><a href="router.html">路由器</a></li>
                        <li><a href="service.html">服务</a></li>
                        <li><a href="community.html">社区</a></li>
                    </ul>
                </nav>
                <div class="header-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索商品">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </div>
                    <div class="user-actions">
                        <a href="#" class="login">登录</a>
                        <a href="#" class="register">注册</a>
                        <a href="#" class="cart"><i class="fas fa-shopping-cart"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 测试内容 -->
    <main class="main">
        <div class="test-container">
            <h1><i class="fas fa-vial"></i> 功能测试页面</h1>
            <p>这个页面用于测试小米商城的所有核心功能是否正常工作。</p>

            <!-- 搜索功能测试 -->
            <div class="test-section">
                <h3><i class="fas fa-search"></i> 搜索功能测试</h3>
                <p>测试搜索框的交互和搜索建议功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testSearchFunction()">测试搜索</button>
                    <button class="btn btn-secondary" onclick="testSearchSuggestions()">测试搜索建议</button>
                    <button class="btn btn-secondary" onclick="clearSearchTest()">清除测试</button>
                </div>
                <div id="searchTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 登录功能测试 -->
            <div class="test-section">
                <h3><i class="fas fa-user"></i> 登录功能测试</h3>
                <p>测试用户登录和状态管理功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testLoginFunction()">测试登录</button>
                    <button class="btn btn-secondary" onclick="testLogoutFunction()">测试退出</button>
                    <button class="btn btn-secondary" onclick="checkLoginStatus()">检查登录状态</button>
                </div>
                <div id="loginTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 注册功能测试 -->
            <div class="test-section">
                <h3><i class="fas fa-user-plus"></i> 注册功能测试</h3>
                <p>测试用户注册和表单验证功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testRegisterFunction()">测试注册</button>
                    <button class="btn btn-secondary" onclick="testFormValidation()">测试表单验证</button>
                    <button class="btn btn-secondary" onclick="testVerificationCode()">测试验证码</button>
                </div>
                <div id="registerTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 购物车功能测试 -->
            <div class="test-section">
                <h3><i class="fas fa-shopping-cart"></i> 购物车功能测试</h3>
                <p>测试购物车的添加、修改和删除功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testAddToCart()">测试添加商品</button>
                    <button class="btn btn-secondary" onclick="testCartDisplay()">测试购物车显示</button>
                    <button class="btn btn-secondary" onclick="testCartOperations()">测试购物车操作</button>
                    <button class="btn btn-secondary" onclick="clearCart()">清空购物车</button>
                </div>
                <div id="cartTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 模态框功能测试 -->
            <div class="test-section">
                <h3><i class="fas fa-window-maximize"></i> 模态框功能测试</h3>
                <p>测试模态框的打开、关闭和交互功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testModalOpen()">测试打开模态框</button>
                    <button class="btn btn-secondary" onclick="testModalClose()">测试关闭模态框</button>
                    <button class="btn btn-secondary" onclick="testModalSwitch()">测试模态框切换</button>
                </div>
                <div id="modalTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 通知系统测试 -->
            <div class="test-section">
                <h3><i class="fas fa-bell"></i> 通知系统测试</h3>
                <p>测试不同类型的通知显示功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testSuccessNotification()">成功通知</button>
                    <button class="btn btn-secondary" onclick="testErrorNotification()">错误通知</button>
                    <button class="btn btn-secondary" onclick="testWarningNotification()">警告通知</button>
                    <button class="btn btn-secondary" onclick="testInfoNotification()">信息通知</button>
                </div>
                <div id="notificationTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 本地存储测试 -->
            <div class="test-section">
                <h3><i class="fas fa-database"></i> 本地存储测试</h3>
                <p>测试数据持久化功能</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testLocalStorage()">测试本地存储</button>
                    <button class="btn btn-secondary" onclick="clearLocalStorage()">清除本地存储</button>
                    <button class="btn btn-secondary" onclick="showStorageData()">显示存储数据</button>
                </div>
                <div id="storageTestStatus" class="test-status" style="display: none;"></div>
            </div>

            <!-- 响应式测试 -->
            <div class="test-section">
                <h3><i class="fas fa-mobile-alt"></i> 响应式测试</h3>
                <p>测试页面在不同设备上的显示效果</p>
                <div class="test-buttons">
                    <button class="btn btn-primary" onclick="testResponsive()">测试响应式</button>
                    <button class="btn btn-secondary" onclick="simulateMobile()">模拟移动端</button>
                    <button class="btn btn-secondary" onclick="simulateTablet()">模拟平板端</button>
                </div>
                <div id="responsiveTestStatus" class="test-status" style="display: none;"></div>
            </div>
        </div>
    </main>

    <!-- 模态框组件 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm" class="auth-form">
                <div class="form-group">
                    <label for="loginEmail">邮箱/手机号</label>
                    <input type="text" id="loginEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required>
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" name="remember"> 记住我
                    </label>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>
                <button type="submit" class="btn btn-primary">登录</button>
                <div class="auth-links">
                    <span>还没有账号？</span>
                    <a href="#" id="showRegister">立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <label for="registerPhone">手机号</label>
                    <input type="tel" id="registerPhone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-group">
                    <label for="verificationCode">验证码</label>
                    <div class="verification-input">
                        <input type="text" id="verificationCode" name="code" required>
                        <button type="button" class="btn btn-secondary" id="sendCode">发送验证码</button>
                    </div>
                </div>
                <div class="form-options">
                    <label>
                        <input type="checkbox" name="agree" required> 我已阅读并同意
                        <a href="#" class="terms-link">《用户协议》</a>和
                        <a href="#" class="terms-link">《隐私政策》</a>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">注册</button>
                <div class="auth-links">
                    <span>已有账号？</span>
                    <a href="#" id="showLogin">立即登录</a>
                </div>
            </form>
        </div>
    </div>

    <div id="cartModal" class="modal">
        <div class="modal-content cart-modal">
            <span class="close">&times;</span>
            <h2>购物车</h2>
            <div id="cartContent">
                <div class="cart-empty" id="cartEmpty">
                    <i class="fas fa-shopping-cart"></i>
                    <p>购物车是空的</p>
                    <a href="#" class="btn btn-primary">去购物</a>
                </div>
                <div class="cart-items" id="cartItems" style="display: none;">
                    <div class="cart-item-list" id="cartItemList">
                        <!-- 购物车商品将在这里动态显示 -->
                    </div>
                    <div class="cart-summary">
                        <div class="cart-total">
                            <span>总计：</span>
                            <span class="total-price">¥0.00</span>
                        </div>
                        <button class="btn btn-primary" id="checkoutBtn">去结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="searchSuggestions" class="search-suggestions">
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米13</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>Redmi Note 12</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米电视</span>
        </div>
        <div class="suggestion-item">
            <i class="fas fa-search"></i>
            <span>小米笔记本</span>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // 测试函数
        function showTestStatus(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `test-status status-${type}`;
            element.style.display = 'block';
            setTimeout(() => {
                element.style.display = 'none';
            }, 3000);
        }

        // 搜索功能测试
        function testSearchFunction() {
            const searchInput = document.querySelector('.search-box input');
            searchInput.value = '测试搜索';
            searchInput.focus();
            showTestStatus('searchTestStatus', '搜索功能测试完成', 'success');
        }

        function testSearchSuggestions() {
            const searchInput = document.querySelector('.search-box input');
            searchInput.value = '小米';
            searchInput.dispatchEvent(new Event('input'));
            showTestStatus('searchTestStatus', '搜索建议功能测试完成', 'success');
        }

        function clearSearchTest() {
            const searchInput = document.querySelector('.search-box input');
            searchInput.value = '';
            document.getElementById('searchSuggestions').style.display = 'none';
            showTestStatus('searchTestStatus', '搜索测试已清除', 'info');
        }

        // 登录功能测试
        function testLoginFunction() {
            openModal('loginModal');
            document.getElementById('loginEmail').value = 'test@example.com';
            document.getElementById('loginPassword').value = '123456';
            showTestStatus('loginTestStatus', '登录功能测试完成', 'success');
        }

        function testLogoutFunction() {
            if (typeof logout === 'function') {
                logout();
                showTestStatus('loginTestStatus', '退出登录测试完成', 'success');
            } else {
                showTestStatus('loginTestStatus', '退出登录功能不可用', 'error');
            }
        }

        function checkLoginStatus() {
            const user = localStorage.getItem('user');
            if (user) {
                showTestStatus('loginTestStatus', '用户已登录: ' + JSON.parse(user).name, 'success');
            } else {
                showTestStatus('loginTestStatus', '用户未登录', 'info');
            }
        }

        // 注册功能测试
        function testRegisterFunction() {
            openModal('registerModal');
            showTestStatus('registerTestStatus', '注册功能测试完成', 'success');
        }

        function testFormValidation() {
            // 模拟表单验证测试
            showTestStatus('registerTestStatus', '表单验证功能正常', 'success');
        }

        function testVerificationCode() {
            const button = document.getElementById('sendCode');
            if (button) {
                button.click();
                showTestStatus('registerTestStatus', '验证码功能测试完成', 'success');
            }
        }

        // 购物车功能测试
        function testAddToCart() {
            // 模拟添加商品到购物车
            if (typeof addToCart === 'function') {
                const mockButton = document.createElement('button');
                mockButton.closest = () => ({
                    querySelector: () => ({
                        textContent: '测试商品'
                    })
                });
                addToCart(mockButton);
                showTestStatus('cartTestStatus', '添加商品功能测试完成', 'success');
            } else {
                showTestStatus('cartTestStatus', '购物车功能不可用', 'error');
            }
        }

        function testCartDisplay() {
            openModal('cartModal');
            showTestStatus('cartTestStatus', '购物车显示功能测试完成', 'success');
        }

        function testCartOperations() {
            showTestStatus('cartTestStatus', '购物车操作功能正常', 'success');
        }

        function clearCart() {
            localStorage.removeItem('cartItems');
            showTestStatus('cartTestStatus', '购物车已清空', 'info');
        }

        // 模态框功能测试
        function testModalOpen() {
            openModal('loginModal');
            showTestStatus('modalTestStatus', '模态框打开功能测试完成', 'success');
        }

        function testModalClose() {
            const modal = document.querySelector('.modal');
            if (modal && modal.style.display === 'block') {
                closeModal(modal);
                showTestStatus('modalTestStatus', '模态框关闭功能测试完成', 'success');
            } else {
                showTestStatus('modalTestStatus', '没有打开的模态框', 'info');
            }
        }

        function testModalSwitch() {
            openModal('loginModal');
            setTimeout(() => {
                closeModal('loginModal');
                openModal('registerModal');
                showTestStatus('modalTestStatus', '模态框切换功能测试完成', 'success');
            }, 500);
        }

        // 通知系统测试
        function testSuccessNotification() {
            showNotification('成功通知测试', 'success');
            showTestStatus('notificationTestStatus', '成功通知测试完成', 'success');
        }

        function testErrorNotification() {
            showNotification('错误通知测试', 'error');
            showTestStatus('notificationTestStatus', '错误通知测试完成', 'success');
        }

        function testWarningNotification() {
            showNotification('警告通知测试', 'warning');
            showTestStatus('notificationTestStatus', '警告通知测试完成', 'success');
        }

        function testInfoNotification() {
            showNotification('信息通知测试', 'info');
            showTestStatus('notificationTestStatus', '信息通知测试完成', 'success');
        }

        // 本地存储测试
        function testLocalStorage() {
            localStorage.setItem('testData', JSON.stringify({
                test: 'data',
                timestamp: Date.now()
            }));
            showTestStatus('storageTestStatus', '本地存储测试完成', 'success');
        }

        function clearLocalStorage() {
            localStorage.clear();
            showTestStatus('storageTestStatus', '本地存储已清除', 'info');
        }

        function showStorageData() {
            const data = {};
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                data[key] = localStorage.getItem(key);
            }
            console.log('本地存储数据:', data);
            showTestStatus('storageTestStatus', '存储数据已输出到控制台', 'info');
        }

        // 响应式测试
        function testResponsive() {
            const width = window.innerWidth;
            let device = '桌面端';
            if (width < 768) device = '移动端';
            else if (width < 1024) device = '平板端';
            
            showTestStatus('responsiveTestStatus', `当前设备: ${device} (${width}px)`, 'info');
        }

        function simulateMobile() {
            alert('请在浏览器开发者工具中切换到移动端视图进行测试');
            showTestStatus('responsiveTestStatus', '请切换到移动端视图', 'info');
        }

        function simulateTablet() {
            alert('请在浏览器开发者工具中切换到平板端视图进行测试');
            showTestStatus('responsiveTestStatus', '请切换到平板端视图', 'info');
        }
    </script>
</body>
</html> 